<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/my_style.css">

    <!-- 用于引入外部html -->
    <script src="../js/include.js"></script>

    <!-- 图标文件 -->
    <script src="../js/feather.min.js"></script>

    <!-- echarts + bmap 依赖 -->
    <script src="../js/echarts.js"></script>
    <script src="../js/bmap.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=kM4US7f5QGd8TjKSk6jSAttHPCrIQzyG"></script>

    <!-- jQuery -->
    <script src="../js/jquery-3.4.1.min.js"></script>

    <title>异常聚集可视化-聚集点</title>
</head>

<body>
<!-- 共用的navbar -->
<include src="navbar.html"></include>

<div class="container-fluid">
    <div class="row">
        <!-- 共用的sidebar -->
        <include src="sidebar.html"></include>
        <!-- 主要内容 -->
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
            <div class="row">
                <!-- 为ECharts准备具备大小（宽高）的Dom -->
                <div id="container" style="width: 1500px;height: 625px;margin-top: 24px;"></div>
                <script type="text/javascript">
                    var dom = document.getElementById("container");
                    var myChart = echarts.init(dom);
                    var app = {};
                    option = null;
                    var posList = [
                        'left', 'right', 'top', 'bottom',
                        'inside',
                        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
                        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
                    ];

                    app.configParameters = {
                        rotate: {
                            min: -90,
                            max: 90
                        },
                        align: {
                            options: {
                                left: 'left',
                                center: 'center',
                                right: 'right'
                            }
                        },
                        verticalAlign: {
                            options: {
                                top: 'top',
                                middle: 'middle',
                                bottom: 'bottom'
                            }
                        },
                        position: {
                            options: echarts.util.reduce(posList, function (map, pos) {
                                map[pos] = pos;
                                return map;
                            }, {})
                        },
                        distance: {
                            min: 0,
                            max: 100
                        }
                    };

                    app.config = {
                        rotate: 90,
                        align: 'left',
                        verticalAlign: 'middle',
                        position: 'insideBottom',
                        distance: 15,
                        onChange: function () {
                            var labelOption = {
                                normal: {
                                    rotate: app.config.rotate,
                                    align: app.config.align,
                                    verticalAlign: app.config.verticalAlign,
                                    position: app.config.position,
                                    distance: app.config.distance
                                }
                            };
                            myChart.setOption({
                                series: [{
                                    label: labelOption
                                }, {
                                    label: labelOption
                                }, {
                                    label: labelOption
                                }, {
                                    label: labelOption
                                }]
                            });
                        }
                    };


                    var labelOption = {
                        show: true,
                        position: app.config.position,
                        distance: app.config.distance,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        rotate: app.config.rotate,
                        formatter: '{c}  {name|{a}}',
                        fontSize: 16,
                        rich: {
                            name: {
                                textBorderColor: '#fff'
                            }
                        }
                    };

                    option = {
                        color: ['#003366', '#006699', '#4cabce', '#e5323e'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['daytime', 'nighttime', 'midnight', 'sum']
                        },
                        toolbox: {
                            show: true,
                            orient: 'vertical',
                            left: 'right',
                            top: 'center',
                            feature: {
                                mark: {show: true},
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        xAxis: [
                            {
                                type: 'category',
                                axisTick: {show: false},
                                data: ['top1', 'top2', 'top3', 'top4', 'top5']
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: 'daytime',
                                type: 'bar',
                                barGap: 0,
                                label: labelOption,
                                data: [45493, 28842, 39056, 41190, 32610]
                            },
                            {
                                name: 'nighttime',
                                type: 'bar',
                                label: labelOption,
                                data: [50134, 108471, 94186, 19765, 42329]
                            },
                            {
                                name: 'midnight',
                                type: 'bar',
                                label: labelOption,
                                data: [82365, 23200, 15564, 28161, 12735]
                            },
                            {
                                name: 'sum',
                                type: 'bar',
                                label: labelOption,
                                data: [177992, 160513, 148806, 89116, 87674]
                            }
                        ]
                    };
                    if (option && typeof option === "object") {
                        myChart.setOption(option, true);
                    }
                </script>
            </div>
        </main>
    </div>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>

</html>